<div class="ui form" id="parameters">
    <table class="ui very compact celled table">
        <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>value</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="parameter in parameters">
            <td class="collapsing">
                        <span class="ui tiny basic icon button" ng-click="showEditParameterDialog(parameter)">
                            <i class="edit blue icon"></i>
                        </span>
            </td>
            <td>{{parameter.name}}</td>
            <td>{{parameter | displayParameter }} {{parameter.unit}}</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="ui modal" id="editParameterDialog" ng-class="{active: editParameterDialogVisible}" ng-keyup="escapeToClose($event)">
    <i class="blue close icon" ng-click="editParameterDialogVisible = false"></i>

    <div class="ui dividing center aligned header">
        Edit Value of "{{editParameter.name}}" {{editParameter.unit ? '（'+editParameter.unit+'）' : ''}}
    </div>
    <div class="content">
        <div class="ui form">
            <div class="required field">
                <label for="edit-parameter">New Value</label>
                <input id="edit-parameter" type="text" ng-model="editParameter.value"/>
            </div>
            <div class="ui blue fluid large submit button"
                 ng-click="submitParameter()">Submit
            </div>
        </div>
    </div>
</div>

